<template>
  <el-card>
    <el-row>
      <el-col :span="12" :offset="7">
        <my-date v-on:query="queryData"></my-date>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div id="chart1"></div>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" style="width: 95%; height: 100%" border>
              <el-table-column prop="total" label="总天数" width="90">
              </el-table-column>
              <el-table-column prop="deal" label="成交天数" width="100">
              </el-table-column>
              <el-table-column prop="nodeal" label="未成交天数" width="112">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div id="chart2"></div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
import myDate from "../../myDate.vue";
export default {
  data() {
    return {
      tableData: [],
      chartData1: [],
      xAxisList: [],
      chartData2: [],
    };
  },
  components: {
    myDate,
  },
  methods: {
    initChart() {
      var myChart = this.$echarts.init(document.getElementById("chart1"));
      myChart.clear();
      var option = {
        title: {
          text: "日前交易情况",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["日前成交"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.xAxisList[0],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "日前成交",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: this.chartData1[0],
          },
        ],
      };
      // this.$nextTick(function () {
      option && myChart.setOption(option);
      // });
    },
    initChart2() {
      var myChart2 = this.$echarts.init(document.getElementById("chart2"));
      myChart2.clear();
      var option2 = {
        title: {
          // text: '日前交易饼图',
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.chartData2[0][1], name: "成交天数" },
              { value: this.chartData2[0][2], name: "未成交天数" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option2 && myChart2.setOption(option2);
    },
    async queryData(start, end) {
      const { data: res } = await this.$http.get(
        `/manage1/sjxh/da/vue_sjxh_table?start=${start}&end=${end}`
      );
      this.tableData = res.data;
      const { data: res1 } = await this.$http.get(
        `/manage1/sjxh/da/vue_sjxh_chart1?start=${start}&end=${end}`
      );
      this.xAxisList = res1.xAxisList;
      this.chartData1 = res1.data;
      console.log("xAxisList@@@", this.xAxisList);
      console.log("chartData1@@@", this.chartData1);
      const { data: res2 } = await this.$http.get(
        `/manage1/sjxh/da/vue_sjxh_chart2?start=${start}&end=${end}`
      );
      this.chartData2 = res2.data;
      console.log("chartData2@@@", this.chartData2);
      this.initChart();
      this.initChart2();
    },
  },
  created() {
    // setTimeout(() => {
    //   this.initChart();
    //   this.initChart2();
    // }, 1000);
  },
};
</script>

<style scoped>
.el-row {
  margin-top: 20px;
}
#chart1 {
  margin-top: 10px;
  width: 100%;
  height: 300px;
}
#chart2 {
  /* margin-top: 10px; */
  /* background-color: red; */
  width: 100%;
  height: 200px;
}
</style>